<template>
  <div>
    <div class="control-Action-page">
      <!-- aside -->
      <div class="manage-page-aside">
        <div class="head-section" style="overflow: hidden">

          <h3 class="table-head">网点列表：</h3>
          <el-select @change="organChangeEvent" v-model="organId" placeholder="请选择" value-key="item">
            <el-option v-for="item in organOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="table-section" style="border: 1px solid #fff;">
          <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 100%">
            <el-tree ref="refAreaTree" :data="areaData" :render-content="renderContent" :props="defaultProps"
              default-expand-all node-key="id" @node-click="handleNodeClick" highlight-current
              :expand-on-click-node="false"></el-tree>
          </el-scrollbar>
        </div>
      </div>
      <!-- content -->
      <div class="content manage-page-content">
        <div class="head-section">
          <div class="head-section">
          <header>
            <el-button @click="handleisbatchChannelchannelAir" size="medium" type="primary" plain>批量设置空调最低温度
            </el-button>
            <el-button @click="handleisbatchMaxMinChannellAir" size="medium" type="primary" plain>批量设置中央空调最高最低温度
            </el-button>
          </header>
          <h3 class="table-head">包含的电器</h3>
        </div>
       
        </div>
        <div class="table-section">
          <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 100%">
            <el-table :data="tableData" border :stripe="true" style="width: 100%" ref="multipleTable"
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column type="index" label="序号" width="60">
              </el-table-column>
              <el-table-column prop="channelName" label="通道名称">
              </el-table-column>
              <!-- <el-table-column prop="guid" label="GUID" width="100"> </el-table-column> -->
              <el-table-column prop="probeMoldCode" label="通道类型" width="120">
                <template slot-scope="scope">
                  <span>{{ scope.row.probeKindName }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="channel" label="通道序号" width="80">
              </el-table-column>

              <el-table-column prop="probeGuid" label="GUID" width="150">
              </el-table-column>

              <el-table-column prop="state" label="状态" width="60">
                <template slot-scope="scope">
                  <span>{{ scope.row.state == "0" ? "关闭" : "开启" }}</span>
                </template>
              </el-table-column>

              <el-table-column prop="lastOnOffTime" label="最后通讯时间" width="160">
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">

                  <el-button
                    v-if="scope.row.probeMoldCode == 127 || scope.row.probeMoldCode == 27 || scope.row.probeMoldCode == 30"
                    type="primary" size="small" @click="handleChannelchannelAir(scope.row)">设置温度</el-button>
                    <el-button
                    v-if=" scope.row.probeMoldCode == 32"
                    type="primary" size="small" @click="handleChannelchannelAirMin(scope.row)">设置最高最低温</el-button>
                </template>

              </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange"
              :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="total" style="text-align: right">
            </el-pagination>
          </el-scrollbar>
        </div>
      </div>
    </div>


    <div>

    </div>
    <el-dialog title="空调最低温度设置"  :visible.sync="ProbechannelAirMaxshow" width="330px" :close-on-click-modal="false" @close="closeProbeAirMax">
        <div class="setting-item">
          <span style="color:#fff">最低温度：</span>
          <el-input-number v-model="ProbechannelAirMaxvalue" :min="0" :step="1" :max="27"></el-input-number>
         
        </div>
        <div style="color:#fff;margin-top:10px">提示：0为不设置最低温度</div>
        <div style="text-align: center;margin-top: 10px;">
          <el-button @click="ProbeAirMaxSubmit" type="primary" style="margin-right: 17px;">保存</el-button>
        </div>
      </el-dialog>
      <el-dialog title="空调的最高温和最低温"  :visible.sync="ProbechannelAirMaxMinshow" width="330px" :close-on-click-modal="false" @close="closeProbeAirMax">
        <div class="setting-item">
          <span style="color:#fff">最高温度：</span>
          <el-input-number v-model="ProbechannelAirmaxTemp" :min="0" :step="1" :max="32"></el-input-number>
         
        </div>
        <div style="color:#fff;margin-top:10px">提示：0为不设置最高温度</div>
        <div class="setting-item">
          <span style="color:#fff">最低温度：</span>
          <el-input-number v-model="ProbechannelAirminTemp" :min="0" :step="1" :max="26"></el-input-number>
         
        </div>
        <div style="color:#fff;margin-top:10px">提示：0为不设置最低温度</div>
        <div style="text-align: center;margin-top: 10px;">
          <el-button @click="ProbeAirMaxMinSubmit" type="primary" style="margin-right: 17px;">保存</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import ajax from "@/utils/ajax";
import { tableSelection, deleteConfirm } from "@/utils/elementui.js";

import axios from "axios";
export default {
  data() {
    return {
      organId: '',
      organOptions: [],
      permission: {
        add: false,
        modify: false,
        delete: false,
        bind_strategy: false,
        add_area_channel: false,
        delete_area_channel: false,
      },
      customerId: "",

      currentAction: null,
      options: [],
      ActionAppliancesData: [],

      //区域
      areaData: [],
      areaid: "",
      defaultProps: {
        children: "children",
        label: "name",
      },
      prodids: [],
      dialogprodidsVisible: false,
      dialogagainChanneVisible: false,
      ProbechannelAirMaxshow:false,
      ProbechannelAirMaxvalue:null,
      isbatch:false,
      tableData: [],
      AlltableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      multipleSelection: [],
      ProbeAirMax: {},

      MoldCode: null,
      ProbechannelAirMaxMinshow:false,
      ProbechannelAirmaxTemp:null,
      ProbechannelAirminTemp:null,
      isbatchMaxMin:false,
      ProbeAirMaxMin: {},
    };
  },
  created() {
    this.customerId = this.$store.getters.customerId;

  },
  mounted() {
    this.$store.dispatch("actions/dynamicTitleAction", this.$route.meta.title);
    this.getOrganListData();

  },

  methods: {

    // 设置可操作的权限
    setPermission() {
      let role_permissions = this.$store.getters.rolePermissions;
      console.log("-----------------------", role_permissions);
      for (let item of role_permissions) {
        if (item.action === "/web/control_Action") {
          for (let permission of item.privilegeList) {
            switch (permission.action) {
              case "/web/control_Action/add":
                this.permission.add = true;
                break;
              case "/web/control_Action/modify":
                this.permission.modify = true;
                break;
              case "/web/control_Action/delete":
                this.permission.delete = true;
                break;
              case "/web/control_Action/bind_strategy":
                this.permission.bind_strategy = true;
                break;
              case "/web/control_Action/add_area_channel":
                this.permission.add_area_channel = true;
                break;
              case "/web/control_Action/delete_area_channel":
                this.permission.delete_area_channel = true;
                break;
              default:
                break;
            }
          }
        }
      }
    },
    // 获取网点列表
    getOrganListData() {
      ajax.get({
        url: this.$API.getUserOrgan + this.$store.getters.user.id,
        success: (response) => {
          const resp = response.data;
          if (resp.length > 0) {
            this.organOptions = resp;
            this.organId = resp[0].id
            this.getAreaTreeByOrganId()
          } else {
            this.organOptions = [];
          }
        },
        error: (res) => {
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
    },
    initTableData() {
      let pageSize = this.pageSize;
      let currentPage = this.currentPage;
      let start = (currentPage - 1) * pageSize;
      let end = start + pageSize;
      // //console.log(this.tableDataAll)
      this.tableData = this.AlltableData.slice(start, end);
      this.$refs.multipleTable.clearSelection();
      // //console.log(this.tableData)
    },
    // 当前size改变
    handleSizeChange(sizeValue) {
      this.pageSize = sizeValue;
      this.getProbechannelListData();
    },
    handlePageChange(pageValue) {
      this.currentPage = pageValue;
      this.getProbechannelListData();
    },
    organChangeEvent() {

      this.getAreaTreeByOrganId()
    },
    //通过网点获取区域列表
    getAreaTreeByOrganId() {
      ajax.get({
        url: this.$API.getAreaTreeByOrganId + this.organId,
        success: (response) => {

          this.areaData = response.data;
          this.options = response.data;
          const resp = response.data;
          if (resp.length > 0) {
            this.areaId = resp[0].id;
            this.getProbechannelListData();
            this.$nextTick(() => {
              this.$refs.refAreaTree.setCurrentKey(resp[0].id);
            });
          } else {
            this.areaData = [];
            this.areaId = null;
          }
        },
        error: (res) => {
          //console.log(res)
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
    },
    // 根据区域id获取探头数据
    getProbechannelListData() {

      ajax.get({
        url: this.$API.getProbeChannelInfoByAreaId + this.areaId,

        success: (response) => {
          this.AlltableData = response.data;
          this.total = response.data.length;
          this.$refs.multipleTable.clearSelection();
          this.initTableData();
        },
        error: (response) => {
          this.$message({
            message: response.message,
            type: "error",
          });
        },
      });
    },
    // 多选
    handleSelectionChange(val) {
      //console.log(val)
      this.multipleSelection = val;
      console.log(val)

    },
    //打开设置最低
    handleChannelchannelAir(data) {
      this.ProbechannelAirMaxshow = true
      this.isbatch = false
      this.ProbechannelAirMaxvalue = data.airTempMax
      this.ProbeAirMax.key = data.id
    },
    //批量打开设置最低
    handleisbatchChannelchannelAir() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请先选择要操作的行",
          center: true,
          duration: 2000,
          type: "warning",
        });
      } else {
        this.ProbechannelAirMaxshow = true
        this.isbatch = true
        this.ProbechannelAirMaxvalue = 0
      }

    },
    //关闭设置最低
    closeProbeAirMax() {
      this.ProbeAirMax.value = ""
      this.ProbeAirMax.key = null
    },
    ProbeAirMaxSubmit() {
      let self = this
      let data = []
   
      if (this.isbatch) {
        //console.log(this.multipleSelection)
        for (let item of this.multipleSelection) {
          let attr = {}
          this.prodids.push(item.id)

          attr.value = this.ProbechannelAirMaxvalue
          attr.key = item.id
          data.push(attr)
        }
      }
      else {
        let attr = {}
        attr.value = this.ProbechannelAirMaxvalue
        attr.key = this.ProbeAirMax.key
        data.push(attr)
      }
      //console.log(data)
      axios
        .post(
          this.$API.setProbeAirMaxTemp,
          data
        )
        .then(function (res) {
          if (res.data.success) {
            self.$alert("修改成功", "修改成功", {
              confirmButtonText: "确定",
              callback: () => {
                self.dialogprodidsVisible = false;
                self.getProbechannelListData();
              },
            });
          }
        });
    },

    //打开设置最低
    handleChannelchannelAirMin(data) {
      this.ProbechannelAirMaxMinshow = true
      this.isbatchMaxMin = false
      this.ProbechannelAirmaxTemp = data.airHeating
      this.ProbechannelAirminTemp = data.airRefrigeration
      this.ProbeAirMaxMin.id = data.id
    },
    //批量打开设置最低
    handleisbatchMaxMinChannellAir() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请先选择要操作的行",
          center: true,
          duration: 2000,
          type: "warning",
        });
      } else {
        this.ProbechannelAirMaxMinshow = true
        this.isbatchMaxMin = true
        this.ProbechannelAirmaxTemp = 0
        this.ProbechannelAirminTemp = 0
      }

    },
    //关闭设置最低
    closeProbeAirMaxMin() {
      this.ProbeAirMaxMin.ProbechannelAirmaxTemp = ""
      this.ProbeAirMaxMin.ProbechannelAirminTemp = ""
      this.ProbeAirMaxMin.id = null
    },
    ProbeAirMaxMinSubmit() {
      let self = this
      let data = []
      if(this.ProbechannelAirmaxTemp !== 0 && this.ProbechannelAirmaxTemp< 19){
        this.$message({
          message: "最高温不能低于19",
          center: true,
          duration: 2000,
          type: "warning",
        });
      }
      else if(this.ProbechannelAirminTemp !== 0  && this.ProbechannelAirminTemp < 18 ){
        this.$message({
          message: "最低温不能低于18",
          center: true,
          duration: 2000,
          type: "warning",
        });
      }
      else if(this.ProbechannelAirmaxTemp < this.ProbechannelAirminTemp){
        this.$message({
          message: "最高温不能低于最低温",
          center: true,
          duration: 2000,
          type: "warning",
        })
      }else{
        if (this.isbatchMaxMin) {
        //console.log(this.multipleSelection)
        for (let item of this.multipleSelection) {
          let attr = {}
          this.prodids.push(item.id)

          attr.maxTemp = this.ProbechannelAirmaxTemp
          attr.minTemp = this.ProbechannelAirminTemp
          attr.id = item.id
          data.push(attr)
        }
      }
      else {
        let attr = {}
        attr.maxTemp = this.ProbechannelAirmaxTemp
        attr.minTemp = this.ProbechannelAirminTemp
        attr.id = this.ProbeAirMaxMin.id
        data.push(attr)
      }
      //console.log(data)
      axios
        .post(
          this.$API.setProbeChannelTemp,
          data
        )
        .then(function (res) {
          if (res.data.success) {
            self.$alert("修改成功", "修改成功", {
              confirmButtonText: "确定",
              callback: () => {
                self.ProbechannelAirMaxMinshow = false;
                self.getProbechannelListData();
              },
            });
          }
        });
      }
     
    },
    // 点击区域
    handleNodeClick(data) {
      this.areaId = data.id;
      let attr = []
      for (let i of getParentIdList(this.areaData, data.id)) {
        attr.push(i.id)
      }
      this.areaIds = attr.join(',')
      this.currentPage = 1;
      this.getProbechannelListData();
    },
    // 在树节点后面添加数量
    renderContent(h, { node, data, store }) {
      let count = "";
      if (data.probeChannelNum > 0) {
        count = '(' + data.probeChannelNum + ')'
      }
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span style="margin-left: 8px;color: green">{count}</span>
        </span>
      );
    },
  },
};
function getParentIdList(data2, nodeId2) {
  let arrRes = [];
  if (data2.length == 0) {
    if (nodeId2) {
      arrRes.unshift({ id: data2.id, columnName: data2.name });
    }
    return arrRes;
  }
  let rev = (data, nodeId) => {
    for (let i = 0, length = data.length; i < length; i++) {
      let node = data[i];
      if (node.id == nodeId) {
        arrRes.unshift({ id: node.id, columnName: node.name });
        rev(data2, node.parentId);
        break;
      } else {
        if (node.children) {
          rev(node.children, nodeId);
        }
      }
    }
    return arrRes;
  };
  arrRes = rev(data2, nodeId2);
  return arrRes;
}
</script>

<style lang="stylus" scoped>
.ruleequipment-tab-title-row {
  height: 0.5rem;
  background-color: #0d2c5a;
  border-bottom: solid 0.01rem #0d235a;
  -webkit-box-shadow: inset 0px 5px 20px 0px rgba(80, 160, 191, 0.5);
  box-shadow: inset 0px 5px 20px 0px rgba(80, 160, 191, 0.5);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 0.1rem;

  div {
    width: 2rem;
    height: 0.44rem;
    line-height: 0.44rem;
    margin-left: 0.08rem !important;
    border-radius: 5px 5px 0px 0px;
    border: solid 1px #0d235a !important;
    border-bottom: 0 !important;
    margin-top: 0.06rem !important;
    color: #fff !important;
    font-size: 0.16rem !important;
    padding: 0 20px;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
  }

  .ruleequipmenttype_on {
    background-color: #16214d !important;
    color: #fff !important;
  }
}

>>> {
  .control-Action-page {
    position: absolute;
    top: 0.5rem;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.2rem;
    overflow: auto;

      .head-section {
        .table-head {
          /* margin-top 0.2rem */
          height: 0.43rem;
          line-height: 0.43rem;
          font-size: 0.16rem;
          font-weight: normal;
          float: left;
        }

        header {
          float: right;
        }
      
    }

    .table-section {
      position: absolute;
      top: 0.72rem;
      left: 0.2rem;
      right: 0.2rem;
      bottom: 0.2rem;
   
    }

    .content {
      .content-head {
        text-align: right;
      }

      .area-table-section {
        position: absolute;
        top: 0.66rem;
        left: 0.2rem;
        right: 0.2rem;
        bottom: 0.2rem;
      }
    }
  }

  .dialog-left {
    .table-head {
      height: 0.3rem;
      margin-top: 0.2rem;
      font-size: 0.16rem;
      font-weight: normal;
    }

    .table-section {
      position: absolute;
      top: 1.2rem;
      left: 0.2rem;
      right: 0.2rem;
      bottom: 0.2rem;
    }

    .dia-table-section {
      height: 300px;
    }
  }

  .el-table__body tr {
    cursor: pointer;
  }

  .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row > td {
    color: #fff;
    background-color: rgba(68, 199, 244, 0.2) !important;
  }

  .el-table__body-wrapper {
    overflow-y: auto !important;
  }

  .el-table .el-checkbox__label {
    color: #fff;
  }

  .el-button.is-round {
    padding: 3px 6px;
  }

  .temperature-txt {
    padding: 0 0.1rem;
    font-size: 0.16rem;
    color: #fff;
  }

  .el-select--mini {
    width: 60px;

    .el-input--suffix .el-input__inner {
      padding-right: 20px;
      padding-left: 10px;
    }
  }

  .air-table-item {
    margin-right: 0.1rem;
  }

  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner, .el-radio__input.is-disabled.is-checked .el-radio__inner {
    background: #409EFF;
  }

  .el-button {
    padding: 0.12rem 0.16rem;
  }

  .el-dialog__footer {
    padding-top: 0;
    padding-bottom: 0.3rem;
  }

  .el-form-item:last-child {
    margin-bottom: 0 !important;
  }

  .area-add {
    width: 380px;
    margin: 0 auto;

    .el-select {
      width: 300px;
    }
  }
}

.equipment-title {
  display: flex;
  margin-bottom: 10px;
}

>>>.equipment-title .el-checkbox__label {
  color: #fff;
}

>>>.equipment-title .el-checkbox {
  min-width: 81px;
  margin-right: 10px;
}

.working-hours-container {
  position: absolute;
  top: 0.5rem;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.2rem;
  overflow: auto;
  background-color: $pageBg;
}

.e-t-r-equipment-row {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 7rem;
  padding: 0.2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #16214d;
  overflow: auto;
}
.e-t-r-equipment-row {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 7rem;
  padding: 0.2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #16214d;
  overflow: auto;
}

.e-t-r-rule-row {
  position: absolute;
  left: 7rem;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0.19rem 0.2rem;
  overflow: auto;
  background: #202c5f;
}

>>>.el-table--striped .el-table__body tr.el-table__row--striped.current-row td, >>>.el-table__body tr.current-row > td {
  color: #fff;
  background-color: rgba(68, 199, 244, 0.2) !important;
}

.e-t-r-rule-box {
  display: flex;
}

.left, .right {
  width: 360px;
  height: 8.1rem;
  padding: 10px;
  border: 1px solid #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.dialog-Action-btn {
  width: 200px;
  padding: 0.2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.dialog-Action-btn .el-button {
  display: block;
  margin: 0.2rem auto;
}
.dialogrule_worktype .el-radio {
    margin-bottom: 10px;
}
>>>.el-dialog .prodtransfer input {
    color: #000;
}
>>>.el-table--striped .el-table__body tr.el-table__row--striped td
    background-color #2a3c6d
</style>
